<template>
    <div class="app-container">
        <el-form ref="searchForm" inline :model="searchForm" style="position:relative;margin-bottom:20px;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="名称：" prop="name">
                        <el-input clearable v-model="searchForm.name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="url：" prop="path">
                        <el-input clearable v-model="searchForm.path" placeholder="请输入"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="请求类型：" prop="requestType">
                        <el-select clearable v-model="searchForm.requestType" placeholder="请选择">
                            <el-option v-for="item in requestTypeOpt" :key="item.label" :label="item.label" :value="item.label"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-button @click="init('search')" type="primary">查询</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button @click="addClick(1)" type="primary" style="position: absolute;right: 0;">添加接口</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin: 20px 0px;" border row-key="id" id="treeTable">
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="path" label="url" align="center"></el-table-column>
            <el-table-column prop="requestType" label="请求类型" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="position" label="位置" align="center"></el-table-column>
            <el-table-column label="操作" width="260" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="editClick(scope.row)" type="primary" plain size="mini">编辑</el-button>
                    <el-button @click.stop="addClick(2,scope.row)" plain size="mini">添加子接口</el-button>
                    <el-button @click.stop="delClick(scope.row)" type="danger" plain size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="100px" style="margin: 0px 50px;">
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="dataForm.name" placeholder="请输入接口名称"></el-input>
                </el-form-item>
                <el-form-item label="url：" prop="path">
                    <el-input v-model="dataForm.path" placeholder="请输入接口url"></el-input>
                </el-form-item>
                <el-form-item label="请求类型：" prop="requestType" v-show="addType === 2">
                    <el-select v-model="dataForm.requestType" placeholder="请选择请求类型" style="width: 100%;">
                        <el-option v-for="item in requestTypeOpt" :key="item.label" :label="item.label" :value="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述：" prop="description">
                    <el-input type="textarea" :rows="4" v-model="dataForm.description" placeholder="请输入接口描述"></el-input>
                </el-form-item>
                <el-form-item label="位置：" prop="position">
                    <el-input v-model="dataForm.position" placeholder="请输入位置"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { addInterface, findInterface, detailInterface, editInterface, delInterface } from '@/api/system/permission/interface'
import { getCookie, setCookie } from '@/utils/auth'
export default {
    name: 'SysInterface',
    data() {
        return{
            tableData: [],
            nowId: '',
            showDialog: false,
            dataForm: {
                name: '',
                path: '',
                requestType: '',
                description: '',
                position: '',
                parentId: '0'
            },
            rules: {
                name: [
                    { required: true, message: '请输入接口名称', trigger: 'blur' }
                ],
                path: [
                    { required: true, message: '请输入接口url', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入接口描述', trigger: 'blur' }
                ],
                position: [
                    { required: true, message: '请输入位置', trigger: 'blur' }
                ]
            },
            searchForm:{
                name: '',
                path: '',
                requestType: '',
            },
            nowPage: 0,
            pageSize: 10,
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            requestTypeOpt: [
                {label: 'GET'},
                {label: 'POST'},
                {label: 'PUT'},
                {label: 'DELETE'},
            ],
            addType: 1,
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            //获取列表信息
            findInterface(_this.nowPage, _this.pageSize,_this.searchForm.name,_this.searchForm.path,_this.searchForm.requestType ).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //添加
        addClick(type,row){
            this.popStatus = 0
            this.showDialog = true
            this.addType = type
            //父级接口id
            if(type == 1){
                this.dataForm.parentId = '0'
                this.dataForm.requestType = ''
            }else if(type == 2){
                this.dataForm.parentId = row.id
                this.dataForm.requestType = 'GET'
            }
            this.dataForm.name = ''
            this.dataForm.path = ''
            this.dataForm.description = ''
            this.dataForm.position = ''
            if(this.dataForm.id){
                delete this.dataForm.id
            }
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    if(_this.popStatus == 0){  //添加
                        addInterface(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }else if(_this.popStatus == 1){  //修改
                        _this.dataForm.id = _this.nowId;
                        editInterface(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.description+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delInterface(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //编辑
        editClick(row){
            this.popStatus = 1
            this.nowId = row.id
            this.dataForm.name = row.name
            this.dataForm.path = row.path
            this.dataForm.description = row.description
            this.dataForm.position = row.position
            this.dataForm.requestType = row.requestType
            this.dataForm.parentId = row.parentId
            if(row.parentId === '0'){
                this.addType = 1
            }else{
                this.addType = 2
            }
            this.showDialog = true
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        }
    },
    mounted(){
        this.init();
    }
}
</script>
<style>
    #treeTable .el-icon-arrow-right:before{
        color: #2196f3;
        font-weight: bold;
        /* content: "\E6DC"; */
        content: "\E791";
    }
    #treeTable .el-table__row,#treeTable .el-table__row.el-table__row--level-0{
        background: #e8f4ff;
    }
    #treeTable .el-table__row.el-table__row--level-1{
        background: #f0f9eb;
    }
    #treeTable .el-table__row.el-table__row--level-2{
        background: oldlace;
    }
    #treeTable tr.hover-row > td{
        background-color: initial;
    }
    #treeTable.el-table th > .cell{
        text-align: center;
    }
</style>